<template>
  <div class="edgex-bottom">
    <a-card>
      <div class="flex items-center justify-between mb-4 search gap-x-4">
        <a-input-search
          v-model:value="value"
          placeholder="请输入Edgex服务ID或服务名称进行搜索"
          enter-button="搜索"
          size="large"
          @search="onSearch"
        />
        <a-checkbox
          v-model:checked="checked"
          class="whitespace-nowrap"
          @change="onSearch"
        >
          <span class="whitespace-nowrap">仅选已收藏</span></a-checkbox
        >
        <a-radio-group
          v-model:value="searchStatus"
          class="whitespace-nowrap"
          @change="onSearch"
        >
          <a-radio-button :value="1">可用</a-radio-button>
          <a-radio-button :value="2">不可用</a-radio-button>
          <a-radio-button :value="0">全部</a-radio-button>
        </a-radio-group>
      </div>
      <div class="flex gap-2 mb-4">
        <div
          class="flex items-center p-3 bg-gray-100 rounded shadow-md cursor-pointer hover:shadow-inner"
          @click="goPrePage"
        >
          <ArrowLeftOutlined class="text-gray-700" />
        </div>
        <div class="grid flex-grow gap-2">
          <div class="grid gap-2 content xl:grid-cols-4" v-if="loaded">
            <EdgexCard
              class="ring-1"
              v-for="item in showEdgexList"
              :key="item.edgex_id"
              :edgex="item"
            />
          </div>
          <div v-else class="flex items-center justify-center bg-gray-200 h-96">
            <a-spin size="large" />
          </div>
        </div>
        <div
          class="flex items-center p-3 bg-gray-100 rounded shadow-md cursor-pointer hover:shadow-inner"
          @click="goNextPage"
        >
          <ArrowRightOutlined class="text-gray-700" />
        </div>
      </div>
      <div class="flex justify-end">
        <a-pagination
          class=""
          :show-size-changer="false"
          :current="current"
          :pageSize="12"
          :total="edgexLength"
          @change="sizeChange"
        />
      </div>
    </a-card>
  </div>
</template>

<script lang="ts">
import EdgexCard from "@/components/cards/EdgexCard.vue";
import { computed, defineComponent, onBeforeMount, ref } from "vue";
import { listEdgex, searchEdgex } from "@/controller/Edgex";
import { Edgex } from "model";
import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  name: "Bottom",
  components: {
    EdgexCard,
    ArrowLeftOutlined,
    ArrowRightOutlined,
  },
  setup() {
    const edgexList = ref<Array<Edgex>>([]);
    const value = ref<string>("");
    const checked = ref<boolean>(false);
    const loaded = ref<boolean>(false);
    onBeforeMount(async () => {
      loaded.value = false;
      edgexList.value = await listEdgex();
      loaded.value = true;
    });

    const action = computed(() => {
      if (checked.value === true) {
        return "follow";
      }
      return "all";
    });
    const searchStatus = ref<number>(0);
    const current = ref<number>(1);
    const edgexLength = computed(() => edgexList.value.length);
    const pageLength = computed(() => Math.ceil(edgexLength.value / 12));
    const showEdgexList = computed(() => {
      return edgexList.value.slice(
        (current.value - 1) * 12,
        current.value * 12
      );
    });
    const goPrePage = () => {
      if (current.value > 1) current.value--;
    };
    const goNextPage = () => {
      if (current.value < pageLength.value) current.value++;
    };
    const sizeChange = (cur: number) => {
      current.value = cur;
    };
    const onSearch = async () => {
      loaded.value = false;
      edgexList.value = await searchEdgex(
        action.value,
        value.value,
        searchStatus.value
      );
      loaded.value = true;
    };
    return {
      searchStatus,
      checked,
      onSearch,
      edgexLength,
      value,
      current,
      sizeChange,
      showEdgexList,
      goPrePage,
      goNextPage,
      loaded,
    };
  },
});
</script>

<style scoped lang="scss"></style>
